<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      grid-template-rows: 100px 100px 100px;


      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(3, 100px);
      /* 容器指定了网格布局以后，接着就要划分行和列。
      grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。 */

      /* display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      grid-template-rows: 33.33% 33.33% 33.33%; */
    }
  </style>
</head>

<body>
  <header>
    这是头部盒子
  </header>
  <div class="main">
    <div class="box1">
      1111
    </div>
    <div class="box2">
      2222
    </div>
    <div class="box3">
      3333
    </div>
  </div>
  <footer>
    这是底部盒子
  </footer>

  <script>
    // 笔记部分
    //（1）repeat()
    // 有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下
    //   .container {
    // display: grid;
    // grid-template-columns: repeat(3, 33.33%);
    // grid-template-rows: repeat(3, 33.33%);
    // }



    //（2）auto-fill 关键字

    // 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
    // .container {
    // display: grid;
    // grid-template-columns: repeat(auto-fill, 100px);
    // }
  </script>
</body>

</html>